import { DownOutlined } from "@ant-design/icons";
import { Dropdown } from "antd";
import { useState, useEffect } from "react";
import "./index.scss";
interface Props {
  color: string;
  change: Function;
}

const ColorPicker = (props: Props) => {
  const [color, setColor] = useState<string>("");
  useEffect(() => {
    setColor(props.color);
  });
  const colorList: string[] = [
    "#F6464A",
    "#D1642E",
    "#D1B631",
    "#72D12E",
    "#1FAD4F",
    "#1FA2AD",
    "#1F7EAD",
    "#2B1FAD",
    "#961FAD",
    "#6CBAE0",
    "#8E9DF2",
    "#E0B06C",
    "#E0756C",
    "#6CE075",
    "#E06C9C",
  ];
  const colorItem = colorList.map((item: string, index: number) => {
    return (
      <div
        key={index}
        style={{
          backgroundColor: item,
        }}
        className="color-block"
        onClick={() => onColor(item)}
      />
    );
  });

  // 选择颜色
  const onColor = (value: string) => {
    setColor(value);
    props.change(value);
  };

  return (
    <Dropdown
      trigger={["click"]}
      placement="topLeft"
      dropdownRender={() => <div className="color-list-style">{colorItem}</div>}
    >
      <div className="color-picker-style">
        <div
          style={{ width: "24px", height: "24px", backgroundColor: color }}
        />
        <DownOutlined style={{ color: "#D9DBDE", marginTop: "5px" }} />
      </div>
    </Dropdown>
  );
};

export default ColorPicker;
